<template>
  <!-- 推广页面 -->
  <div class="promote">
    <van-nav-bar
      title="我的推广"
      fixed
      left-arrow
      right-text="收益"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <header>
      <img src="../../../../mock/images/share.png" alt="" />
    </header>
    <main>
      <van-config-provider :theme-vars="themeVars">
        <van-card
          v-for="item in homeData.list"
          :key="item.id"
          :price="formatMoney(item.price)"
          :title="item.title"
          :thumb="homeData.image2"
          :origin-price="399"
        >
          <!-- <template #num>
            <span> {{ item.num }} 人正在学习</span>
          </template> -->

          <template #num>
            <van-button size="mini" color="red" @click="Click"
              >赚13.5</van-button
            >
          </template>
          <template #tags>
            <van-tag plain type="danger" style="margin-top: 20px"
              >限时优惠</van-tag
            >
          </template>
        </van-card>
      </van-config-provider>
      <van-config-provider :theme-vars="themeVars">
        <van-card
          v-for="item in homeData.list"
          :key="item.id"
          :price="formatMoney(item.price)"
          :title="item.title"
          :thumb="homeData.image4"
          :origin-price="104"
        >
          <template #num>
            <van-button size="mini" color="red" @click="Click"
              >赚13.5</van-button
            >
          </template>
          <template #tags>
            <van-tag plain type="danger" style="margin-top: 20px"
              >限时优惠</van-tag
            >
          </template>
        </van-card>
        <van-divider>我是有底线的</van-divider>
      </van-config-provider>
    </main>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Promote',
  data() {
    return {
      homeData: {},
      active: 0,
      // images: [homeData.image1, homeData.image2],
      themeVars: {
        cardThumbSize: '100px',
        carTextSize: '20px',
        cardPriceColor: '#ffc71c',
        cardTitleFontSize: '20px',
        cardBackgroundColor: '#fff',
        navBarTitleFontWeight: 'bolder',
      },
    }
  },
  created() {
    axios
      .get('/mock/api/home/list')
      .then((mockData) => {
        this.homeData = mockData.data.data
      })
      .catch(console.error)
  },
  methods: {
    // getMock() {
    //   console.log(this.data)
    // },
    formatMoney(val) {
      return Number(val).toFixed(1)
    },
    onClickLeft() {
      this.$router.push('/user')
    },
    onClickRight() {
      this.$router.push('/earnings')
    },
    Click() {
      this.$router.push('/paydetail')
    },
  },
}
</script>

<style lang="less" scoped>
:deep(.van-nav-bar .van-icon) {
  color: black;
}
:deep(.van-nav-bar__text) {
  color: rgb(255, 98, 98);
  font-size: 18px;
  font-weight: bold;
}
:deep(.van-nav-bar__title) {
  font-size: 18px;
  font-weight: bold;
}
.promote {
  header {
    margin-top: 2.4rem;
    img {
      width: 100%;
    }
  }
  main {
    :deep(.van-card__title) {
      font-size: 0.7rem;
      font-weight: bold;
    }
  }
}
</style>
